<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-20 10:00:05
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-29 16:49:00
-->
<template>
  <div>

    <firstCom></firstCom>
    <!-- <secondCom v-model="bg"></secondCom> -->
    <secondCom :vm.sync="bg"></secondCom>
    <thirdCom></thirdCom>

    <!-- <boxCom></boxCom>
    御剑乘风来,除魔天地间!
    <sisterCom></sisterCom>
     <div v-for="item  in arr" :key="item.id">=={{ item }}=</div>
    <hr />  
    <div v-for="(val, key)  of obj" :key="key">=={{ val }}={{ key }}</div>

    <div v-for="item  in  10000" :key="item">{{ item }}</div> -->
    <!-- <hr /> -->
    <NavBar @back='back' @share="share" bg="pink">
      <template #left>
        <div>
          <span>《 </span>
          <span>返回 </span>
        </div>

      </template>
      <template v-slot:center>
        <h3>首页</h3>
      </template>
      <template slot="right">
        <span>分享</span>
      </template>
    </NavBar>

    <NavBar @back='back' @share="share" bg="yellow" :path="'/login'">
      <template #left>
        <div>
          <span>《 </span>
          <span>返回 </span>
        </div>

      </template>
      <template v-slot:center>
        <h3>首页</h3>
      </template>
      <template slot="right">
        <span>分享</span>
      </template>
    </NavBar>

    <h1 :class="[active, 'active2', active === 'activeName' ? 'active3' : '', { 'active4': true }]">class+style===arr
    </h1>
    <h1 :class="{ 'active4': true, 'active5': active === 'activeName' }">class+style==obj</h1>
    <h1 :style="{ 'color': 'red', background: bg }">class+style==obj</h1>



  </div>
</template>
<script>
// import boxCom from './components/Box'
// import sisterCom from './components/Sister'
import NavBar from './components/NavBar'
export default {
  name: 'App',
  provide () {
    return {
      no: '爷爷=-=====第一代'
    }
  },
  components: {
    // boxCom,
    // sisterCom,
    NavBar
  },
  data () {
    return {
      arr: [1, 2, 3],
      obj: {
        id: 1, name: 'rose'
      },
      active: 'activeName',
      bg: 'green'
    }
  },
  created () {

  },
  computed: {
  },
  methods: {
    back () {
      console.log('back');
    },
    share () {
      console.log('share');
    }
  },
  watch: {
    // active (newVal, oldVal) {

    // },
    // "$route" () {

    // }
  }
}
</script>
<style lang='less'  scoped>
</style>
